<template>
  <div class="common-layout">
    <div style="font-size: 26px; margin-bottom: 10px">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }"
          ><span style="color: #c2c6cc">首页</span></el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/thematic-education' }">
          <span style="color: #c2c6cc">专题教育</span></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="layout-container">
      <div class="left">
        <div
          @click="clickPlanType(item.planTypeId)"
          class="left-item"
          v-for="(item, index) in planTypeList.planTypes"
          :key="index"
          :class="{ active: planTypeId === item.planTypeId }"
        >
          {{ item.planTypeName }}
        </div>
      </div>
      <div class="center">
        <div class="bottom-item-search">
          <div class="group" @click="searchCourseware">
            <svg viewBox="0 0 24 24" aria-hidden="true" class="icon">
              <g>
                <path
                  d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"
                ></path>
              </g>
            </svg>
            <input
              class="input"
              type="search"
              placeholder="请输入方案名称"
              v-model="planName"
              @keyup.enter="searchCourseware"
            />
          </div>
        </div>
        <div class="card-content-list">
          <div
            class="card-content"
            v-for="(item, index) in planList"
            :key="index"
            @click="clickPlan(item.planId)"
          >
            <div class="plan-name">{{ item.planName }}</div>
            <div class="item">课件时长：{{ item.duration }}</div>
          </div>
        </div>
        <div class="pagination-container">
          <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="totalNum"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
const router = useRouter();
import {
  getPlanListApi,
  openDefenseApi,
  closeDefenseApi,
} from "@renderer/api/face";
//导入defaultPlanTypeList
import { defaultPlanTypeList } from "@renderer/bean/plan";
const planTypeList = ref(defaultPlanTypeList);

const planName = ref("");
const totalNum = ref(0);
const pageSize = ref(10);
const pageNumber = ref(0);
const planList = ref([]);
const planTypeId = ref(1);

function clickPlan(val: number) {
  router.push({
    path: "/thematic-education-study",
    query: { planId: val }, // 将 planId 作为查询参数传递
  });
}

function searchCourseware() {
  console.log(planName.value);
  getPlanList();
}

const handleCurrentChange = (val: number) => {
  pageNumber.value = val;
  getPlanList();
};

function clickPlanType(val: number) {
  planTypeId.value = val;
  getPlanList();
}
//请求方案列表
async function getPlanList() {
  const { data, message, code, total } = await getPlanListApi({
    size: pageSize.value,
    current: pageNumber.value,
    planName: planName.value,
    planTypeId: planTypeId.value,
  });
  if (code == 2000) {
    planList.value = data;
    totalNum.value = total;
  }
}

// 页面加载时调用接口
onMounted(async () => {
  getPlanList();
});

//组件销毁时关闭抓拍
onUnmounted(() => {
  //关闭
});
</script>
<style lang="scss" scoped>
@import "./css/index.scss";
</style>
